<template>
  <div class="container page">
    <!-- <img class="headimg" :style="{'backgroundImage': 'url(' + bgurl + ');'}" :src="img" mode="widthFix"> -->
    <p style="height:50rpx;"></p>
    <p class="item2">
      <img class="headimg" :src="img" mode="widthFix">
    </p>

    <p style="text-align:center;font-size: 40rpx;"> {{name}}</p>
    <div class="data">
      <p v-if="code === '0'"><span>{{assessProfit}}</span><br>单月收益</p>
      <p v-else><span>结算中</span><br>单月收益</p>
      <p v-if="code === '0'&&maxReturnRate !== '--'"><span>{{maxReturnRate}}</span><br>单月回撤</p>
      <p v-else-if="code === '0'&&maxReturnRate === '--'"><span>0%</span><br>单月回撤</p>
      <p v-else><span>结算中</span><br>单月回撤</p>
    </div>

    <div v-if="newDeal" class="list3">
      <div class="left-three">
        <p>{{ newDeal.stockName }}</p>
        <p>{{ newDeal.orderDateTime }}</p>
      </div>
      <div class="right-three">
        <p>成交价</p>
        <p>{{ newDeal.dealPrice }}</p>
      </div>
    </div>

    <div class="echarts-wrap">
      <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
    </div>
    <p class="des"> <span style="color:#ec4b4e;">-&nbsp</span> <span>沪深300</span> <span>&nbsp&nbsp</span> <span style="color:#58c1ca;">-&nbsp</span> <span>个人账户</span> </p>

    <p class="foot_trader">盘手更多信息,下载人人交易网APP查看</p>


  </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
import config from '@/config'


// import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
import * as echarts from '../../../static/echarts.min.js'


let chart = null;
 
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, 'dark', {
    width: width,
    height: height
  });
  canvas.setChart(chart);
 
  // 请求图表数据
  post2('person_trend', {'account_id': this.$root.$mp.query.account}).then(result => {
      // console.log('111222', result.data)

      let data = result.data

      let xAxis = []   
      // console.log('data', data)

      for (let variable of data) {
        xAxis = xAxis.concat(variable[0])
        // console.log('variable', variable[0])
        // console.log('xAxis', xAxis)
      } 
      // console.log('xAxis', xAxis)

      let low = []
      for (let variable of data) {
        low = low.concat(parseInt(variable[1].toFixed(1)))
        // console.log('low', low)
      } 

      let high = []
      for (let variable of data) {
        high = high.concat(parseInt(variable[2].toFixed(1)))
        // console.log('high', high)
      } 

  let option = {
    backgroundColor: '#090f1d',
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['低点','高点']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        // data: ['周一','周二','周三','周四','周五','周六','周日']
        data: xAxis
    },
    yAxis: {
        type: 'value',
        boundaryGap: false,
        data: xAxis
    },
    series: [
        {
            name:'低点',
            type:'line',
            stack: '总量',
            data: low
        },
        {
            name:'高点',
            type:'line',
            stack: '总量',
            data: high
        }
    ]
  }; // ECharts 配置项
 
  chart.setOption(option);
 
  return chart; // 返回 chart 后可以自动绑定触摸操作

  });
  
}

export default {
  components: {
    YearProgress,
    mpvueEcharts
  },
  data () {
    return {
      code: '',
      list: [],
      echarts,
      onInit: initChart,
      newDeal: [],
      assessProfit: '',
      maxReturnRate: '',
      img: 'http://116.62.67.174:10009/stock/httpServiceImpl/image/2017-01-01/df_avatar.png',
      name: '',
      user: '',
      account: '',
      bgurl: 'https://www.rrjiaoyi.com/static/rr-min/group/cb_bg_tx@3x.png',
      group: [],
      playerRank: []
    }
  },
  mounted () {

    // this.bookid = this.$root.$mp.query.id

    // this.demo().then(result => {
    // console.log('demo', result.data);
    // });
    
    // this.joke().then(result => {
    // console.log('joke', result.data.data.msg);
    // });

    // this.player().then(result => {
    //   this.playerRank = result
    //   console.log('joke', result);
    // });

  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你加入他的股友圈`,
      path: `/pages/me/main?openid_create=${wx.getStorageSync('userinfo').openId}`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share1.png'
    }
  },
  methods: {
    // 盘手信息
    async playerInfo1(account_id) {
      return await post2('schedule', {'account_id': account_id})
    },
    async playerInfo2(account_id) {
      return await post2('person_trend', {'account_id': account_id})
    },
    async playerInfo3(account_id,user_id) {
      return await post2('new_operation', {'account_id': account_id, 'user_id': user_id})
    },
    // 查询群列表
    // async groupList(a, b) {
    //   let openid = wx.getStorageSync('userinfo').openId
    //   return await post2('list_group', {'openid': openid})
    // },
    groupClick(groupid, groupname) {
      wx.navigateTo({
        url: `/pages/group/main?groupid=${groupid}&groupname=${groupname}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
      this.userinfo = res
    }

  },
  onShow () {
    Object.assign(this.$data, this.$options.data())
    if(this.$root.$mp.query.img&&this.$root.$mp.query.img!=='undefined'){
      this.img = decodeURIComponent(this.$root.$mp.query.img)
    }
    this.name = this.$root.$mp.query.name
    this.user = this.$root.$mp.query.user
    this.account = this.$root.$mp.query.account

    // console.log('info', this.img);
    // console.log('info', this.name);

    this.playerInfo1(this.account).then(result => {
      // console.log('account', this.account);
      // console.log('1111111111', result);
      this.code = result.header.code
      this.assessProfit = result.result.assessProfit
      this.maxReturnRate = result.result.maxReturnRate
    });
    // this.playerInfo2(this.account).then(result => {
      // console.log('222222222', result.data)
    //   this.list = result.data
    // });
    this.playerInfo3(this.account, this.user).then(result => {
      // console.log('account', this.account);
      // console.log('user', this.user);
      // console.log('res', result);
      this.newDeal = result.newDeal
    });
  }
}
</script>

<style lang='scss'>
.container{
  font-size: 30rpx;
  color: white;
  // background-color: #070d1b;
  // width: 100%;
  // line-height: 100%;
  // opacity: 0.7;
}
page {
  background-color: #090f1d;
  // background-color: #070d1b;
  // background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/common/bg@3x.png");
  width: 100%;
  height: 100%;
}
.headimg {
  // width: 50rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  width: 15%;
  // padding: 17rpx;
  border:3px solid #44CFDC;
  border-radius: 5px;
}
.item2{
  text-align: center;
}
.data{
  text-align: center;
  display: flex;
  align-items: center;
  margin: 50rpx;
  p{
    color: #47d8e2;
    padding-top:50rpx;
    flex: 1;
    height: 150rpx;
    background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    background-image: url("https://www.rrjiaoyi.com/static/rr-min/trader/ps_bg_dysy@3x.png");
    // img{
    //   width: 90%;
    // }
    span {
      color: #fff;
      font-size: 40rpx;
    }
  }
}
.foot_trader{
  margin: 100rpx 0;
  padding-bottom: 100rpx;
  text-align: center;
  color: #47d8e2;
}
.list3 {
  margin: 50rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/trader/ps_bg_gr_ddtc@3x.png");
  height: 180rpx;
  line-height: 50rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  color: #D0E3EE;
  padding-top: 50rpx;
  .left-three {
    flex: 1;
  }
  .right-three {
    flex: 1;
    text-align: right;
    color: #44CFDC
  }
}
.echarts-wrap {
  margin: 7.5%;
  margin-top: -10rpx;
  width: 72%;
  // margin-top: 20rpx;
  // width: 100%;
  height: 300rpx;
  border:2px solid #44CFDC;
  border-radius: 5px;
  // background-color: #090f1d;
  padding: 50rpx;
  padding-top: 0rpx;
}
.des{
  text-align: center;
  // color: #44CFDC;
  color: #999;
  margin: -50rpx 0;
}
</style>
